<template>
    <div class="card card-custom gutter-b example example-compact" id="functionInfoBody">
        <div class="card-header">
            <div class="card-title">
            <span class="card-icon">              
                <i class="text-dark-50 flaticon-search-magnifier-interface-symbol"></i>
            </span>
            <h3 class="card-label"> 查询区域 </h3>
            </div>
            <div class="card-toolbar">
            <div class="example-tools justify-content-center">
                <!-- 
                <span data-toggle="tooltip" class="example-toggle"></span>
                <span data-toggle="tooltip" class="example-copy"></span> 
            -->
            </div>
            </div>
        </div>
        <div class="card-body">
            <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                <div class="m-portlet__body">	
                
                </div> 
                <div class="m-portlet__foot m-portlet__no-border m-portlet__foot--fit">
                <div class="m-form__actions m-form__actions--solid">
                    <div class="row">
                        <div class="col m--align-left">
                            <div class="form-group m-form__group row">
                                <label class="col-form-label">隶属平台:</label>
                                <div class="col-lg-3">
                                    <el-select v-model="searchForm.sysModeId">
                                        <el-option
                                        v-for="item in sysModeList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                        </el-option>
                                    </el-select>
                                </div>
                                <label class="col-form-label">隶属模块:</label>
                                <div class="col-lg-3">
                                    <el-select v-model="searchForm.sysModulesId" placeholder="请选择">
                                        <el-option
                                        v-for="item in sysModulesList"
                                        :key="item.id"
                                        :label="`${item.sysName}-----${item.name}`"
                                        :value="item.id">
                                        </el-option>
                                    </el-select>
                                </div>
                                <input id="expandTreeState" type="hidden" value="0">
                                <a class="btn btn-light-primary font-weight-bold mr-2 m-btn m-btn--custom m-btn--label-info m-btn--bolder"  href="javascript:void(0)" @click="addXtFunctioninfo()">
                                    <i class="la la-plus la-lg"></i>添加功能
                                </a>
                            </div>
                        </div>
                        <div class="col m--align-right">
                            <a class="btn btn-text-dark-50 btn-icon-primary font-weight-bold btn-hover-bg-light mr-3" href="javascript:void(0)" @click="importOauthFunctionInfo()">
                                <span><i class="fa flaticon-folder-3"></i><span> 导 入</span></span>
                            </a>
                            <a class="btn btn-text-dark-50 btn-icon-primary font-weight-bold btn-hover-bg-light mr-3" href="javascript:void(0)" @click="toggleRowExpansion(false)">
                                <span class="svg-icon svg-icon-primary svg-icon-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                        <polygon points="0 0 24 0 24 24 0 24"/>
                                        <path d="M12.2928955,6.70710318 C11.9023712,6.31657888 11.9023712,5.68341391 12.2928955,5.29288961 C12.6834198,4.90236532 13.3165848,4.90236532 13.7071091,5.29288961 L19.7071091,11.2928896 C20.085688,
                                        11.6714686 20.0989336,12.281055 19.7371564,12.675721 L14.2371564,18.675721 C13.863964,19.08284 13.2313966,19.1103429 12.8242777,18.7371505 C12.4171587,18.3639581 12.3896557,17.7313908 12.7628481,17.3242718 L17.6158645,12.0300721 L12.2928955,6.70710318 Z" fill="#000000" fill-rule="nonzero"/>
                                        <path d="M3.70710678,15.7071068 C3.31658249,16.0976311 2.68341751,16.0976311 2.29289322,
                                        15.7071068 C1.90236893,15.3165825 1.90236893,14.6834175 2.29289322,14.2928932 L8.29289322,8.29289322 C8.67147216,7.91431428 9.28105859,7.90106866 9.67572463,8.26284586 L15.6757246,13.7628459 C16.0828436,14.1360383 16.1103465,14.7686056 15.7371541,15.1757246 C15.3639617,
                                        15.5828436 14.7313944,15.6103465 14.3242754,15.2371541 L9.03007575,10.3841378 L3.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(9.000003, 11.999999) rotate(-270.000000) translate(-9.000003, -11.999999) "/>
                                    </g>
                                </svg><span>全部折叠</span></span>
                            </a>
                            <a class="btn btn-text-dark-50 btn-icon-primary font-weight-bold btn-hover-bg-light mr-3" href="javascript:void(0)" @click="toggleRowExpansion(true)">
                                <span class="svg-icon svg-icon-primary svg-icon-2">
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <polygon points="0 0 24 0 24 24 0 24"/>
                                            <path d="M8.2928955,3.20710089 C7.90237121,2.8165766 7.90237121,2.18341162 8.2928955,1.79288733 C8.6834198,1.40236304 9.31658478,1.40236304 9.70710907,1.79288733 L15.7071091,
                                            7.79288733 C16.085688,8.17146626 16.0989336,8.7810527 15.7371564,9.17571874 L10.2371564,15.1757187 C9.86396402,15.5828377 9.23139665,15.6103407 8.82427766,15.2371482 C8.41715867,14.8639558 8.38965574,14.2313885 8.76284815,13.8242695 L13.6158645,8.53006986 L8.2928955,3.20710089 Z" fill="#000000" fill-rule="nonzero" 
                                            transform="translate(12.000003, 8.499997) scale(-1, -1) rotate(-90.000000) translate(-12.000003, -8.499997) "/>
                                            <path d="M6.70710678,19.2071045 C6.31658249,19.5976288 5.68341751,19.5976288 5.29289322,19.2071045 C4.90236893,18.8165802 4.90236893,18.1834152 5.29289322,17.7928909 L11.2928932,11.7928909 C11.6714722,11.414312 12.2810586,11.4010664 12.6757246,11.7628436 L18.6757246,17.2628436 C19.0828436,17.636036 19.1103465,
                                            18.2686034 18.7371541,18.6757223 C18.3639617,19.0828413 17.7313944,19.1103443 17.3242754,
                                            18.7371519 L12.0300757,13.8841355 L6.70710678,19.2071045 Z" fill="#000000" fill-rule="nonzero" opacity="0.3" transform="translate(12.000003, 15.499997) scale(-1, -1) rotate(-360.000000) translate(-12.000003, -15.499997) "/>
                                        </g>
                                    </svg><span>全部展开</span>
                                </span>          
                            </a>
                        </div>
                    </div>
                </div>
                </div>             
            </div>
        </div>
        <el-table
            ref="treeTableRef"
            sum-text="sum"
            index-text="#"
            :data="functionInfoList"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            :default-expand-all="props.defaultExpandAll"
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            >
            <el-table-column
                prop="name"
                label="名称"
                show-overflow-tooltip 
                min-width="160">
                <template slot-scope="scope">
                    <i class="menu-icon text-dark-50" :class="scope.row.vueIcon">                    
                    <span></span>
                    </i>
                    <span class="menu-text"> {{scope.row.name}}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="类型"
                min-width="100">
                <template slot-scope="scope">
                    <div v-if="scope.row.tempObject == 'Sources'">
                        <b-badge class="mr-1" variant="primary">资源</b-badge>
                    </div>
                    <div v-if="scope.row.tempObject == 'Function'">
                        <b-badge class="mr-1" variant="warning">功能</b-badge>
                    </div>
                </template>
            </el-table-column>
            
            <el-table-column
                label="数据权限"
                min-width="100">
                <template slot-scope="scope">
                    <div class="symbol symbol-30 symbol-circle symbol-light-primary" v-if="scope.row.integerappend.split(',')[0] == '0'">									
                        <span class="symbol-label font-size-h8">是</span>								
                    </div>
                    <div class="symbol symbol-30 symbol-circle symbol-light-info" v-else-if="scope.row.integerappend.split(',')[0] == '1'">									
                        <span class="symbol-label font-size-h8">否</span>								
                    </div>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column
                label="是否拦截"
                min-width="100">
                <template slot-scope="scope">               
                    <span class=" label label-lg font-weight-bold label-light-primary label-inline"  v-if="scope.row.integerappend.split(',')[1] == '0'">无需拦截</span>
                    <span class="label label-lg font-weight-bold label-light-info label-inline"  v-else-if="scope.row.integerappend.split(',')[1] == '1'">必须拦截</span>
                    <span v-else>--</span>
                </template>
            </el-table-column>
            <el-table-column
                label="操作"
                fixed="right" 
                min-width="100">
                <template slot-scope="scope">
                    <a href="javascript:;" @click="exportOauthFunctionInfo(scope.row)" class="btn btn-sm btn-clean btn-icon" title="导出功能" v-if="scope.row.tempObject == 'Function'">	                            
                        <span class="svg-icon svg-icon-primary svg-icon-2x">
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                            <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <polygon points="0 0 24 0 24 24 0 24"/>
                                <rect fill="#000000" opacity="0.3" x="11" y="3" width="2" height="14" rx="1"/>
                                <path d="M6.70710678,10.7071068 C6.31658249,11.0976311 5.68341751,11.0976311 5.29289322,
                                10.7071068 C4.90236893,10.3165825 4.90236893,9.68341751 5.29289322,9.29289322 L11.2928932,
                                3.29289322 C11.6714722,2.91431428 12.2810586,2.90106866 12.6757246,3.26284586 L18.6757246,
                                8.76284586 C19.0828436,9.13603827 19.1103465,9.76860564 18.7371541,10.1757246 C18.3639617,10.5828436 17.7313944,10.6103465 17.3242754,10.2371541 L12.0300757,5.38413782 L6.70710678,10.7071068 Z" fill="#000000" fill-rule="nonzero"/>
                                <rect fill="#000000" opacity="0.3" x="3" y="19" width="18" height="2" rx="1"/>
                            </g>
                        </svg>
                        </span>						
                    </a>
                    <a href="javascript:;" @click="updateXtFunctioninfo(scope.row)" class="btn btn-sm btn-clean btn-icon" title="编辑功能" v-if="scope.row.tempObject == 'Function'">	                            
                        <span class="svg-icon svg-icon-primary svg-icon-2x">	                                
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">	                                    
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">	                                        
                                    <rect x="0" y="0" width="24" height="24"></rect>	                                        
                                    <path d="M8,17.9148182 L8,5.96685884 C8,5.56391781 8.16211443,5.17792052 8.44982609,4.89581508 L10.965708,
                                        2.42895648 C11.5426798,1.86322723 12.4640974,1.85620921 13.0496196,2.41308426 L15.5337377,4.77566479 C15.8314604,
                                        5.0588212 16,5.45170806 16,5.86258077 L16,17.9148182 C16,18.7432453 15.3284271,19.4148182 14.5,19.4148182 L9.5,
                                        19.4148182 C8.67157288,19.4148182 8,18.7432453 8,17.9148182 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000000, 10.707409) rotate(-135.000000) translate(-12.000000, -10.707409) ">
                                    </path>	                                        
                                    <rect fill="#000000" opacity="0.3" x="5" y="20" width="15" height="2" rx="1"></rect>	                                    
                                </g>	                                
                            </svg>                           
                        </span>							
                    </a>
                    <a href="javascript:;" @click="delXtFunctioninfo(scope.row)" class="btn btn-sm btn-clean btn-icon" title="删除功能" v-if="scope.row.tempObject == 'Function'">	                            
                        <span class="svg-icon svg-icon-primary svg-icon-2x">	                                
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">	                                    
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">	                                       
                                    <rect x="0" y="0" width="24" height="24"></rect>	                                        
                                    <path d="M6,8 L6,20.5 C6,21.3284271 6.67157288,22 7.5,22 L16.5,22 C17.3284271,22 18,21.3284271 18,20.5 L18,8 L6,8 Z" 
                                    fill="#000000" fill-rule="nonzero"></path>	                                        
                                    <path d="M14,4.5 L14,4 C14,3.44771525 13.5522847,3 13,3 L11,3 C10.4477153,3 10,3.44771525 10,
                                        4 L10,4.5 L5.5,4.5 C5.22385763,4.5 5,4.72385763 5,5 L5,5.5 C5,5.77614237 5.22385763,6 5.5,6 L18.5,
                                        6 C18.7761424,6 19,5.77614237 19,5.5 L19,5 C19,4.72385763 18.7761424,4.5 18.5,4.5 L14,4.5 Z" fill="#000000" opacity="0.3">
                                    </path>	                                    
                                </g>	                                
                            </svg>	                        
                        </span>							
                    </a>
                </template>
            </el-table-column>
        </el-table>
        <OauthFunctionInfoFileUpload ref="oauthFunctionInfoFileUploadRef" @change="initTree"></OauthFunctionInfoFileUpload>
        <FunctionInfoAdd ref="functionInfoAddRef" @change="initTree"></FunctionInfoAdd><!--采用父窗口关闭传递的方法-->
        <FunctionInfoUpdate ref="functionInfoUpdateRef" @change="initTree"></FunctionInfoUpdate><!--采用父窗口关闭传递的方法-->
    </div>
</template>
<script>
import { SET_BREADCRUMB } from "@/store/breadcrumbs.module";
import Swal from "sweetalert2";
import apiUtil from "@/core/util/apiUtil.js";
import FunctionInfoAdd from "@/view/oauth/oauth-function-info/oauth-function-info-add.vue";
import FunctionInfoUpdate from "@/view/oauth/oauth-function-info/oauth-function-info-update.vue";
import OauthFunctionInfoFileUpload from "@/view/oauth/oauth-function-info/oauth-function-info-file.vue";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating,downloadFileCallFn } from "@/core/util/jehcUtil.js";
export default {
    data() {
        return {
            searchForm:{sysModeId:"",sysModulesId:""},
            sysModeList:[],
            functionInfoList: [],
            sysModulesList:[],
            props: {
                defaultExpandAll:false
            },
        }
    },
    watch: {
        "searchForm.sysModeId":{//监听字段变化
            handler:function(newVal,old){             
                if(newVal == "" || newVal == undefined || newVal == null){
                    this.functionInfoList = [];
                }else{
                    this.initTree();
                }
            }
        }
    },
    components: {
        FunctionInfoAdd,
        FunctionInfoUpdate,
        OauthFunctionInfoFileUpload,
    },
    mounted() {
        this.$store.dispatch(SET_BREADCRUMB, [{ title: "功能资源" }]);
        this.initSysModeList();
    },
    methods: {
        initTree() {
            this.functionInfoList = [];
            if(null != this.searchForm.sysModeId && "" != this.searchForm.sysModeId){
                showWating({ renderBody: "functionInfoBody" });
                apiUtil.query(process.env.VUE_APP_OAUTH_API + "/oauthFunctionInfo/treeList?sysModeId="+this.searchForm.sysModeId, {}).then(({ data }) => {
                    let result = JSON.parse(data.data);
                    let treeList = this.doListToTree(result, null);
                    this.functionInfoList = treeList;
                    setTimeout(() => {
                        this.toggleRowExpansion(this.props.defaultExpandAll)
                    }, 100);
                });
            }            
        },
        addXtFunctioninfo() {
            this.$refs.functionInfoAddRef.showModal();
        },
        exportOauthFunctionInfo(row){
            this.$confirm("确定导出功能："+row.name+"?", "提示", {type: "warning",}).then(() => {
                    let url = process.env.VUE_APP_OAUTH_API+'/oauthFunctionInfo/export?id='+row.buessid; // 请求接口
                    let method = "GET"; // 请求方式 GET或POST
                    let fileName = row.name+".json"; // 下载后的文件名称
                    var params = "name='test" // 后台接口需要的参数
                    downloadFileCallFn(url, method, fileName,params);
                }).catch(()=>{});//注意这里，这里是重点！！！;  
        },
        updateXtFunctioninfo(row){
            this.$refs.functionInfoUpdateRef.showModal(row.buessid);
        },
        delXtFunctioninfo(row){
            if (!row.buessid) {
                handleAlert("id不存在", "warning", 3);
                return;
            }
            // 删除前提示
            this.$confirm("确认删除记录吗?", "提示", { type: "warning", }).then(() => {
                apiUtil.delete(process.env.VUE_APP_OAUTH_API + "/oauthFunctionInfo/delete",{id:row.buessid}).then(data => {
                    if (data.data.success) {
                        handleAlert("删除成功", "success", 3);
                        this.initTree();
                    } else {
                        handleAlert("删除失败", "error", 3);
                    }
                });
            }).catch(() => { });//注意这里，这里是重点！！！;        
        },
        importOauthFunctionInfo(){
            this.$refs.oauthFunctionInfoFileUploadRef.showModal();
        },
        toggleRowExpansion(isExpansion){
            this.props.defaultExpandAll = isExpansion;
            this.toggleRowExpansion_forAll(this.functionInfoList,isExpansion);
        },
        toggleRowExpansion_forAll(data,isExpansion){
            data.forEach(item=>{
                this.$refs.treeTableRef.toggleRowExpansion(item,isExpansion);
                if(item.children != undefined && item.children != null){
                    this.toggleRowExpansion_forAll(item.children,isExpansion);
                }
            })
        },
        initSysModeList() {
            let params = {};
            apiUtil.query(process.env.VUE_APP_OAUTH_API + "/oauthSysMode/listAll", params).then(({ data }) => {
                this.sysModeList = data.data;
            });
        },
        doListToTree(list, root){
            const arr = []
            // 1.遍历
            list.forEach((item) => {
                let name = item.name;
                name = name.replace("<font color='#22b9ff' style='font-family: cursive; font-size: larger;'>", "");                
                name = name.replace("<font style='font-family: cursive;font-size: initial;'>", "");
                name = name.replace("</font>", "");
                item.name = name;
                // 2.首次传入空字符串  判断list的pid是否为空 如果为空就是一级节点
                if (item.parentId === root) {
                    // 找到之后就要去找item下面有没有子节点  以 item.id 作为 父 id, 接着往下找
                    const children = this.doListToTree(list, item.id)
                    if (children.length > 0) {
                        // 如果children的长度大于0,说明找到了子节点
                        item.children = children
                    }
                    // 将item项, 追加到arr数组中
                    arr.push(item)
                }
            })
            return arr
        },
    }
};
</script>